<template>
  <div>
    <van-nav-bar left-arrow @click-left="$router.go(-1)" @click-right="$router.push('/')">
      <template #right>
        <van-icon name="wap-home-o" size="24" />
      </template>
    </van-nav-bar>
    <div>
      <div class="bigbox">
        <van-row>
          <van-col span="6"
            ><img src="../assets/img/头像.png" alt=""
          /></van-col>
          <van-col span="14">
            <div>
              <span>名称：</span>
              <span>{{ custName }}</span>
            </div>
            <div>
              <span>电话：</span>
              <span>{{ telephone }}</span>
            </div>
          </van-col>
          <van-col span="4" @click="gocustomer($route.query.id)"
            ><div class="smallbox">客户信息</div></van-col
          >
        </van-row>
      </div>
    </div>
    <van-tabbar v-model="active" :fixed="false">
      <van-tabbar-item :icon="pic1">收入分析</van-tabbar-item>
      <van-tabbar-item :icon="pic2">旗下企业</van-tabbar-item>
      <van-tabbar-item :icon="pic3">合作伙伴</van-tabbar-item>
      <van-tabbar-item :icon="pic4">当年收入</van-tabbar-item>
    </van-tabbar>
    <div class="content">
      <Income v-if="active == 0 ? true : false" />
      <Enterprise v-if="active == 1 ? true : false" />
      <Partners v-if="active == 2 ? true : false" />
      <Incomes v-if="active == 3 ? true : false" />
    </div>
  </div>
</template>

<script>
import { GetCustIncomeData } from "@/request/api";
import Income from "@/components/UserDetailsIncome";
import Enterprise from "@/components/UserDetailsEnterprise";
import Partners from "@/components/UserDetailsPartners";
import Incomes from "@/components/UserDetailsIncomes";

export default {
  data() {
    return {
      active: 0,
      pic1: require("../assets/img/收入分析.png"),
      pic2: require("../assets/img/旗下企业.png"),
      pic3: require("../assets/img/合作伙伴.png"),
      pic4: require("../assets/img/当年收入.png"),
      custName: "",
      telephone: "",
      id:""
    };
  },
  created() {
    GetCustIncomeData(this.$route.query.id).then((res) => {
      this.custName = res.data.custName;
      this.telephone = res.data.telephone;
    });
  },
  components: {
    Income,
    Enterprise,
    Partners,
    Incomes,
  },
  methods: {
    gocustomer(val) {
        this.$router.push("/customerdetails?id=" + val)
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
  /deep/.van-nav-bar__text {
    color: #fff;
  }
}
.bigbox {
  padding: 30px 20px 0;
  background-color: rgb(6, 6, 139);
}
.van-row {
  padding: 20px 0 10px 20px;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  img {
    width: 100%;
  }
  .van-col--6 {
    padding-right: 20px;
  }
}
.smallbox {
  background-color: orange;
  border-radius: 5px 0 0 5px;
  color: #fff;
  text-align: center;
}
.content {
  padding: 10px 15px 0;
}
</style>